<h3>Tabs Overview</h3>
The w2tabs object allows you to create tabs. Tabs can be static or dynamic. Dynamic tabs can be created and/or removed at the runtime. You can
also create closable tabs.
<div style="height: 20px"></div>

<h4>Example</h4>
Below is a simple example how to use tabs. It shows the minimum HTML and JavaScript you need to render the tab bar. It is assumed
in the example that you link jquery.js, w2ui.js and w2ui.css files.

<textarea class="html">
<html>
<head>
    <link rel="stylesheet" type="text/css"
        href="https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" />
</head>
<body>
    <div id="tabs"></div>
    <div id="tabsContent"
            style="height: 400px; padding: 10px; border: 1px solid #ccc; border-top: 0px">
        tab1
    </div>
</body>
<script type="module">
import { w2tabs, query } from 'https://rawgit.com/vitmalina/w2ui/master/dist/w2ui.es6.min.js'
let tabs = new w2tabs({
    name: 'myTabs',
    active: 'tab1',
    tabs: [
        { id: 'tab1', text: 'Tab 1' },
        { id: 'tab2', text: 'Tab 2' },
        { id: 'tab3', text: 'Tab 3' },
        { id: 'tab4', text: 'Tab 4' }
    ],
    onClick(event) {
        let tab = event.detail.tab
        query('#tabsContent').html(tab.text)
    }
})
tabs.render('#tabs')
</script>
</html>
</textarea>